<template>
  <div class="base-container">
    <vab-card class="card-header" shadow="never">
      <div class="page-header">
        <div class="page-header-name">
          <span>{{ baseInfo.username }}</span>
          <vab-icon
            v-if="baseInfo.gender === 1"
            icon="men-line"
            style="margin-left: 10px; color: #72c7d1"
          />
          <vab-icon
            v-else
            icon="women-line"
            style="margin-left: 4px; color: #eb9582"
          />
          <el-tag type="danger" style="margin-left: 10px">
            {{ baseInfo.bind_name }}
          </el-tag>
        </div>
        <div class="page-header-tel">
          <vab-card shadow="hover">
            <div class="card-content">
              <div class="left-content">
                <vab-icon
                  icon="phone-fill"
                  style="
                    font-size: 20px;
                    margin-right: 5px;
                    color: rgb(247, 125, 69);
                  "
                />
                {{ baseInfo.mobile }}
              </div>
              <div class="right-content">
                <el-button
                  type="primary"
                  @click="copy(baseInfo.mobile, $event)"
                >
                  一键复制
                </el-button>
              </div>
            </div>
          </vab-card>
          <vab-card shadow="hover">
            <div class="card-content">
              <div class="left-content">
                <vab-icon
                  icon="wechat-fill"
                  style="
                    font-size: 20px;
                    margin-right: 5px;
                    color: rgb(65 181 132);
                  "
                />
                {{ baseInfo.weixin ? baseInfo.weixin : '未填写' }}
              </div>
              <div class="right-content">
                <el-button
                  type="primary"
                  @click="copy(baseInfo.weixin, $event)"
                >
                  一键复制
                </el-button>
              </div>
            </div>
          </vab-card>
        </div>
        <div class="page-header-info">
          <div>录入时间:{{ baseInfo.created_at }}</div>
          <el-divider direction="vertical" />
          <div>来源:{{ baseInfo.sourcefrom_name }}</div>
          <el-divider direction="vertical" />
          <div>录入人:{{ baseInfo.input_name }}</div>
          <el-divider direction="vertical" />
          <div>分派跟进:{{ baseInfo.maker_name }}</div>
          <el-divider direction="vertical" />
          <div>上次跟进:从未跟进</div>
        </div>
      </div>
    </vab-card>
  </div>
</template>
<script>
  import clip from '@/utils/clipboard'
  export default defineComponent({
    name: 'BaseComponents',
    props: {
      baseComponentsProp: {
        type: Object,
        required: true,
      },
    },
    setup(props) {
      console.log(props)
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        baseInfo: null,
      })

      watchEffect(() => {
        state.baseInfo = props.baseComponentsProp
      })
      const copy = (val, event) => {
        if (val) {
          clip(val, event)
        } else {
          $baseMessage(
            '文本内容未填写，复制失败！',
            'error',
            'vab-hey-message-error'
          )
        }
      }
      return {
        ...toRefs(state),
        copy,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .page-header {
    width: 100%;
    &-name {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 600;
    }
    &-tel {
      display: flex;
      align-items: center;
      .el-card {
        flex: 1;
        margin-right: 30px;
        margin-top: 10px;
        border-radius: 10px;
        font-size: 16px;
      }
    }

    &-info {
      display: flex;
      align-items: center;
    }
  }

  .card-content {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 使子元素在主轴上均匀分布，两端对齐 */
    align-items: center; /* 使子元素在交叉轴上居中，如果需要的话 */
  }

  .right-content {
    /* 如果需要，可以设置一个最小宽度 */
    min-width: fit-content; /* 或者使用具体的宽度值 */
  }
</style>
